<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>在线订购</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

    <!-- Open Sans font from Google CDN -->

    <!-- Pixel Admin's stylesheets -->
    <link href="../../assets/stylesheets/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="../../assets/stylesheets/pixel-admin.min.css" rel="stylesheet" type="text/css">
    <link href="../../assets/stylesheets/widgets.min.css" rel="stylesheet" type="text/css">
    <link href="../../assets/stylesheets/rtl.min.css" rel="stylesheet" type="text/css">
    <link href="../../assets/stylesheets/themes.min.css" rel="stylesheet" type="text/css">

    <!--[if lt IE 9]>
    <script src="../../assets/javascripts/ie.min.js"></script>
    <![endif]-->

    <script src="../../assets/javascripts/jquery-1.10.2.min.js"></script>
    <script src="../../assets/javascripts/jquery-dateFormat.min.js"></script>

    <style>
        .sliderbox{position:relative;}/*必须加这句css,否则向左右，上下滚动时会没有效果*/
        .text{height:150px; width:600px; overflow: hidden; position: relative; margin:0px auto;}
        .text li{line-height:30px; height: 60px; width: 600px; white-space: nowrap; overflow: hidden; text-overflow:ellipsis;}
    </style>
</head>


<!-- 1. $BODY ======================================================================================

	Body

	Classes:
	* 'theme-{THEME NAME}'
	* 'right-to-left'      - Sets text direction to right-to-left
	* 'main-menu-right'    - Places the main menu on the right side
	* 'no-main-menu'       - Hides the main menu
	* 'main-navbar-fixed'  - Fixes the main navigation
	* 'main-menu-fixed'    - Fixes the main menu
	* 'main-menu-animated' - Animate main menu
-->
<body class="theme-default main-menu-animated">

<script>var init = [];</script>

<div class="container">
        <div class="col-md-5">
            <img th:src="${product.images}" src="../../assets/product/pic.png" class="featurette-image img-responsive center-block" data-src="holder.js/500x500/auto" alt="">
        </div>
        <div class="col-md-7">
                <h2 class="featurette-heading" th:text="${product.name}"><span class="text-muted"></span></h2>
                <p class="lead" th:utext="${product.content}"></p>
            <div class="panel">
                <div class="panel-heading">
                    <span class="panel-title">选择尺码</span>
                </div>
                <div class="panel-body buttons-with-margins" >
                    <div class="style" th:each="s,idx:${styles}" style="float: left"><button  onclick="dostyle(this)" th:class="${idx.index==0?'btn btn-primary':'btn btn-flat ' }" th:text="${s.name}"></button> &nbsp;&nbsp;</div>
                </div>
            </div>
            <div class="panel">
                <div class="panel-heading">
                    <span class="panel-title">促销</span>
                </div>
                <div class="panel-body buttons-with-margins" >
                    <div class="price" th:each="p,index:${prices}" style="float: left"><button  th:onclick="'javascript:doprice(this,'+${p.id}+');'" th:class="${index.index==0?'btn btn-success':'btn btn-flat' }" th:text="${p.name+'¥' + p.price}"></button> &nbsp;&nbsp;</div>
                </div>
            </div>
        </div>

</div>

<div class="container">
    <div class="col-sm-12">
        <img src="http://7xr0tv.com1.z0.glb.clouddn.com/d.jpg" class="featurette-image img-responsive center-block" />
    </div>
</div>
<div class="container">
    <div class="col-sm-12">

        <!-- 10. $FORM_EXAMPLE =============================================================================

                        Form example
        -->
        <form class="panel form-horizontal">
            <input type="hidden" name = "priceid" th:value="${prices[0].id}" />
            <input type="hidden" name ="style" th:value="${styles[0].name}"/>
            <input type="hidden" name ="pid" th:value="${product.id}"/>
            <div class="panel-heading">
                <span class="panel-title">订单提交</span>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <label for="mobile" class="col-sm-2 control-label">手机号</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="mobile" placeholder="手机号">
                    </div>
                </div> <!-- / .form-group -->
                <div class="form-group">
                    <label for="link" class="col-sm-2 control-label">联系人</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="link" placeholder="联系人">
                        <p class="help-block">.</p>
                    </div>
                </div> <!-- / .form-group -->

                <div class="form-group">

                    <label for="fontaddr" class="col-sm-2 control-label">所在地区</label>
                    <div class="col-sm-10">
                        <div id="fontaddr">
                            <select></select>
                            <select></select>
                            <select></select>
                        </div>
                    </div>
                </div> <!-- / .form-group -->
                <div class="form-group">

                    <label for="addrinfo" class="col-sm-2 control-label">详细地址</label>
                    <div class="col-sm-10">
                        <textarea class="form-control" id="addrinfo"></textarea>
                        <p class="help-block">请填写详细地址 方便我们联系到你</p>
                    </div>
                </div> <!-- / .form-group -->
                <div class="form-group">
                    <label class="col-sm-2 control-label">付款方式</label>
                    <div class="col-sm-10">
                        <div class="radio">
                            <label>
                                <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" class="px" checked="">
                                <span class="lbl">货到付款</span>
                            </label>
                        </div> <!-- / .radio -->
                        <!--<div class="radio">-->
                            <!--<label>-->
                                <!--<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" class="px">-->
                                <!--<span class="lbl">转账付款</span>-->
                            <!--</label>-->
                        <!--</div> &lt;!&ndash; / .radio &ndash;&gt;-->
                        <!--<div class="radio">-->
                            <!--<label>-->
                                <!--<input type="radio" name="optionsRadios" id="optionsRadios2-2" value="option2" class="px">-->
                                <!--<span class="lbl">申请试用</span>-->
                            <!--</label>-->
                        <!--</div> &lt;!&ndash; / .radio &ndash;&gt;-->
                    </div> <!-- / .col-sm-10 -->
                </div> <!-- / .form-group -->
                <div class="form-group" style="margin-bottom: 0;">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button id="sub" class="btn btn-primary">购买</button>
                    </div>
                </div> <!-- / .form-group -->
            </div>
        </form>
        <!-- /10. $FORM_EXAMPLE -->

    </div>


</div>
</div> <!-- / #content-wrapper -->

<div class="wffahuo_wrap"><div id="wffahuo" class="text">
    <ul class="sliderbox" style="margin-top: 0px;">
        <script type="text/javascript">

            //使用方法
            var now = new Date();
            var nowStr = $.format.date(now,"yyyy-MM-dd");
            document.write("<li><a>"+nowStr
                +"内蒙古的萧**［180****3051］</a><br>您订购的 <font class='green'>买1条 ￥198元</font> 已发货！</a></li> <li class='ybg'><a>"+nowStr
                +"福建的罗*［178****4603］</a><br>您订购的 <font class='green'>买3送2 ￥594元</font> 已发货！</a></li> <li><a>"+nowStr
                +"新疆的韩*［135****8687］</a><br>您订购的 <font class='green'>买2送1 ￥396元</font> 已发货！</a></li> <li class='ybg'><a>"+nowStr
                +"云南的林**［151****1238］</a><br>您订购的 <font class='green'>买1条 ￥198元</font> 已发货！</a></li> <li><a>"+nowStr
                +"北京的胡**［184****3365］</a><br>您订购的 <font class='green'>买3送2 ￥594元</font> 已发货！</a></li> <li class='ybg'><a>"+nowStr
                +"海南的卢**［158****1306］</a><br>您订购的 <font class='green'>买3送2 ￥594元</font> 已发货！</a></li> <li><a>"+nowStr
                +"北京的周*［177****4644］</a><br>您订购的 <font class='green'>买3送2 ￥594元</font> 已发货！</a></li> <li class='ybg'><a>"+nowStr
                +"浙江的罗*［183****6569］</a><br>您订购的 <font class='green'>买3送2 ￥594元</font> 已发货！</a></li> <li><a>"+nowStr
                +"江苏的黄*［136****8513］</a><br>您订购的 <font class='green'>买3送2 ￥594元</font> 已发货！</a></li> <li class='ybg'><a>"+nowStr
                +"四川的袁**［177****8717］</a><br>您订购的 <font class='green'>买3送2 ￥594元</font> 已发货！</a></li> <li><a>"+nowStr
                +"海南的贾*［184****9079］</a><br>您订购的 <font class='green'>买1条 ￥198元</font> 已发货！</a></li> <li class='ybg'><a>"+nowStr
                +"山西的林**［158****7395］</a><br>您订购的 <font class='green'>买2送1 ￥396元</font> 已发货！</a></li> <li><a>"+nowStr
                +"北京的郭*［157****4862］</a><br>您订购的 <font class='green'>买1条 ￥198元</font> 已发货！</a></li> <li class='ybg'><a>"+nowStr
                +"四川的曹**［185****3778］</a><br>您订购的 <font class='green'>买1条 ￥198元</font> 已发货！</a></li> <li><a>"+nowStr
                +"宁夏的董*［155****8952］</a><br>您订购的 <font class='green'>买2送1 ￥396元</font> 已发货！</a></li> <li class='ybg'><a>"+nowStr
                +"四川的薛**［138****3016］</a><br>您订购的 <font class='green'>买1条 ￥198元</font> 已发货！</a></li> <li><a>"+nowStr
                +"福建的朱*［152****9976］</a><br>您订购的 <font class='green'>买1条 ￥198元</font> 已发货！</a></li> <li class='ybg'><a>"+nowStr
                +"北京的马*［177****6367］</a><br>您订购的 <font class='green'>买2送1 ￥396元</font> 已发货！</a></li> <li><a>"+nowStr
                +"江苏的曾*［131****5492］</a><br>您订购的 <font class='green'>买2送1 ￥396元</font> 已发货！</a></li> <li class='ybg'><a>"+nowStr
                +"江西的刘**［159****6155］</a><br>您订购的 <font class='green'>买1条 ￥198元</font> 已发货！</a></li> <li><a>"+nowStr
                +"吉林的黄*［135****6995］</a><br>您订购的 <font class='green'>买1条 ￥198元</font> 已发货！</a></li>");
        </script>

    </ul>
</div></div>
<!-- Get jQuery from Google CDN -->



<!-- Pixel Admin's javascripts -->
<script src="../../assets/javascripts/bootstrap.min.js"></script>
<script src="../../assets/javascripts/pixel-admin.min.js"></script>
<script src="../../assets/javascripts/distpicker.data.min.js"></script>
<script src="../../assets/javascripts/distpicker.min.js"></script>
<script src="../../assets/javascripts/power-slider.min.js"></script>
<script type="text/javascript">
    init.push(function () {

        $("#wffahuo").powerSlider({delayTime:3000,sliderNum:2});
        // Javascript code here
        $("#fontaddr").distpicker({
            province: "选择省份",
            city: "选城市",
            district: "选地区"
        });
        $('#sub').on('click',function(){
           // $("form").submit(function(){
            event.stopPropagation();
               // event.defaultPrevented();
                var addr =  $('#fontaddr select')[0].value +
                    $('#fontaddr select')[1].value+
                    $('#fontaddr select')[2].value+
                    $("#addrinfo")[0].value;


                var link = $('#link').val();

                if(link == null || link==''){
                   // $.growl.error({ message: "联系人不能为空" });
                    alert('联系人不能为空');
                    return false;
                }

                var mobile = $('#mobile').val();

                if(mobile == null||mobile == ''){
                    //$.growl.error({ message: ""电话号码不能为空 });
                    alert('电话号码不能为空');
                    return false;
                }

            if($("#addrinfo")[0].value == ''||$("#addrinfo")[0].value  ==null){
               // $.growl.error({ message: "请输入详细信息" });
                alert('请输入详细信息');
                return false;
            }
                var style = $("input[name='style']").val();
                var priceid = $("input[name='priceid']").val();
                //


                var data = {
                    stylename : $("input[name='style']").val(),
                    mobile:$('#mobile').val(),
                    username:$('#link').val(),
                    addr:addr,
                    priceid:$("input[name='priceid']").val(),
                    productid:$('input[name="pid"]').val()
                }

            $.ajax("/www/addOrder",{data:data})
                .done(function(res) {
                    alert( "购买成功！" );
                    $(this).prop("disabled", false);
                })
                .fail(function(res) {
                    alert( "error" );
                })
                .always(function() {
                    $(this).prop("disabled", false);
                });
            $(this).prop("disabled", true);
          //  });
        });

    });
    window.PixelAdmin.start(init);

    function dostyle(o){
        var _self = o;
        $(o).parent().parent().find('button').removeClass().addClass('btn btn-flat');
        $(o).removeClass().addClass('btn btn-primary')
        $("input[name='style']").val($(o).text());


    }
    function doprice(o,id){
        $(o).parent().parent().find('button').removeClass().addClass('btn btn-flat');
        $(o).removeClass().addClass('btn btn-success');

        var _self = o;

        $("input[name='priceid']").val(id);
    }
</script>


</body>
</html>